<template>
	<div>
		<div class="flex items-center">
			<sports-icon :sportId="(match || selection)?.sportId" class="relative" />
			<betting-name
				class="mx-1 app-font-bold text-t-1 truncate"
				:id="selection?.id"
				:betslipLine="selection?.betslipLine"
				:points="selection?.points"
				:side="selection?.side" />
			<match-live-logo v-if="(match || selection)?.isLive" />
		</div>
		<div class="text-sm leading-[16px] text-t-2">
			<template v-if="eventType === MatchType.fixture">
				<div>{{ (market || data.selection)?.marketTypeName }}</div>
				<match-name :event-name="(match || selection)?.eventName"></match-name>
			</template>
			<template v-else>
				<match-name
					:event-name="(match || selection)?.eventName"
					:filter-league-name="(match || data.selection)?.leagueName"></match-name>
				<match-league
					:league-id="(match || data.selection)?.leagueId"
					:leagueName="(match || data.selection)?.leagueName" />
			</template>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { SportsIcon } from '@/components/sports'
import { BettingName } from '@/components/betting'
import { MatchLiveLogo, MatchName, MatchLeague } from '@/components/match'
import { PropType, computed } from 'vue'
import { BetslipItemType } from '@/types'
import { MatchType } from '@/enums'
import { useMatchStore } from '@/store'
import { getMarket, getSelection } from '@/utils'

const props = defineProps({
	data: {
		type: Object as PropType<BetslipItemType>,
		required: true
	}
})

const matchStore = useMatchStore()

const eventType = computed(() => match.value?.type || props.data.selection?.eventType)

const match = computed(() => matchStore.getMatch(props.data.eventId))

const market = computed(() => getMarket(match.value, props.data.marketId))

const selection = computed(
	() => getSelection(match.value, props.data.marketId, props.data.id) || props.data.selection
)
</script>
